<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height: 500px;
            border: 3px solid red;
            margin: 10px;
            /* padding: 10px; */
            background-color: blueviolet;
            position: relative;
        }

        #box1{
            width: 200px;
            height: 200px;
            border: 2px solid red;
            background-color: black;
            margin: 50px;
        }

        h3 {
            width: 500px;
            height: 500px;
            background-color: green;
        }
    </style>
</head>

<body>

    <div class="box" id="box">
        <div id="box1"></div>
    </div>
    <h3>1</h3>
    <h3>2</h3>
    <h3>3</h3>
    <h3>3</h3>
    <h3>3</h3>
    <h3>3</h3>
</body>

</html>
<script>
    /**
     * 属性
     * clientHeight 获取元素高度包括padding部分，但不包括border和margin
     * clientWidth  获取元素宽度包括padding部分，但不包括border和margin
     * scrollHeight 元素总高度，它包括padding，但是不包括border和margin包括溢出的不可见内容
     * scrollWidth  元素总宽度，它包括padding，但是不包括border和margin包括溢出的不可见内容
     * scrollLeft 元素的水平滚动调向右滚动的像素数量
     * scrollTop 元素的垂直滚动调向下滚动的像素数量
     * offsetHeight 元素css垂直高度（单位元素），包括元素本身的高度、padding和border
     * offsetWidth 元素css水平宽度（单位元素），包括元素本身的宽度、padding和border
     * offsetLeft 到定位父级左边界的间距
     * offsetTop 到定位父级上边界的间距 
    */
    var box = document.getElementById('box')
    console.log(box.clientHeight) //120
    console.log(box.clientWidth) //120

    //获取浏览器可视区域的高度
    console.log(document.documentElement.clientHeight)
    //获取页面的高度
    console.log(document.body.clientHeight)

    console.log('--------------------------------')

    console.log(box.scrollHeight)
    console.log(box.scrollWidth)

    console.log(document.documentElement.scrollHeight)
    console.log(document.body.scrollHeight)

    console.log('--------------------------------')

    //获取滚动高度
    console.log(document.documentElement.scrollTop)

    console.log('--------------------------------')

    console.log(box.offsetHeight) //126
    console.log(box.offsetWidth) //126

    var box1 = document.getElementById('box1');
    console.log(box1.offsetLeft)
</script>